<template>
  <div class="dashboard-container">
    <!-- 导航栏 -->
    <navigation class="nav-dark"></navigation>

    <!-- 全屏滚动公告 -->
    <div class="marquee-container">
      <div class="marquee-content">
        <span v-for="(item, index) in noticeData" :key="index" class="marquee-item">
          <i class="iconfont icon-announcement"></i>
          {{ item.content }}
        </span>
      </div>
    </div>

    <!-- 核心数据区 -->
    <div class="main-grid">
      <!-- 左列 -->
      <div class="grid-column">
        <!-- 项目得分横向堆叠柱状图模块 -->
        <div class="cyber-card" style="margin-top: 0.5rem;">
          <h3 class="card-title"><i class="iconfont icon-riLine-cpu-line"></i>项目能量矩阵</h3>
          <div ref="projectScoreChart" class="chart-box" style="height: 200px;"> <!-- 高度从400px调整为300px -->
            <div class="loading-effect" v-if="isLoading.projectScore"></div>
          </div>
        </div>

        <!-- 全息项目卡牌墙 -->
        <div class="cyber-card" style="margin-top: 0.5rem;">
          <h3 class="card-title"><i class="iconfont icon-riLine-cpu-line"></i>全息项目矩阵</h3>
          <div ref="projectWallChart" class="chart-box" style="height: 400px;">
            <div class="loading-effect" v-if="isLoading.projectWall"></div>
          </div>
        </div>

        <!-- 活动水平时间流线图 -->
        <div class="cyber-card" style="margin-top: 0.5rem;">
          <h3 class="card-title"><i class="iconfont icon-huodong"></i>活动时间线</h3>
          <div ref="activityTimelineChart" class="chart-box" style="height: 300px;">
            <div class="loading-effect" v-if="isLoading.activityTimeline"></div>
          </div>
        </div>

      </div>

      <!-- 中列 -->
      <div class="grid-column center-column">
        <div class="profile-card">
          <div class="hologram-effect">
            <img src="@/assets/img/center.gif" class="profile-img" />
            <div class="scan-line"></div>
          </div>
          <div class="tags-container">
            <div class="left-tags">
              <span v-for="(tag, index) in leftTags" :key="index" class="tag">{{ tag.text }}</span>
            </div>
            <div class="right-tags">
              <span v-for="(tag, index) in rightTags" :key="index" class="tag">{{ tag.text }}</span>
            </div>
          </div>
          <div class="data-glowing">
            <div class="glowing-item">
              <span class="label">平均GPA</span>
              <span class="value">{{ avgGpa }}</span>
            </div>
            <div class="glowing-item">
              <span class="label">挂科数</span>
              <span class="value">{{ failureCount }}</span>
            </div>
          </div>
        </div>
        <!-- 学业轨迹折线图 -->
        <div class="cyber-card1">
          <h3 class="card-title"><i class="iconfont icon-shujufenxi" style="font-size: 24px;"></i>学业轨迹</h3>
          <div ref="performanceChartRef" class="chart-box" style="height: 300px;">
            <div class="loading-effect" v-if="isLoading.gpa"></div>
          </div>
        </div>
        <!-- 新增一个双列容器包裹这两个图表 -->
      <div class="dual-chart-container">
        <!-- 奖项星云图 -->
        <div class="cyber-card" style="margin-top: 0.5rem;">
          <h3 class="card-title"><i class="iconfont icon-bisai" style="font-size: 18px;"></i>奖项分布</h3>
          <div ref="awardChart" class="chart-box" style="height: 200px;">
            <div class="loading-effect" v-if="isLoading.award"></div>
          </div>
        </div>

        <!-- 综合评分雷达图 -->
        <div class="cyber-card" style="margin-top: 0.5rem;">
          <h3 class="card-title"><i class="iconfont icon-zhengshu"></i>综合能力雷达图谱</h3>
          <div ref="radarChart" class="chart-box" style="height: 270px;">
            <div class="loading-effect" v-if="isLoading.radar"></div>
          </div>
        </div>
      </div>
      </div>

      <!-- 右列 -->
      <div class="grid-column">
        <!-- 实习维度分析柱状图 -->
        <div class="cyber-card" style="margin-top: 0.5rem;">
          <h3 class="card-title"><i class="iconfont icon-shenheguanli"></i>实习维度分析</h3>
          <!-- <div ref="internshipBarChart" class="chart-box">
            <div class="loading-effect" v-if="isLoading.internship"></div>
          </div> -->
          <div ref="internshipBarChart" class="chart-box" style="height:200px">
            <div class="loading-effect" v-if="isLoading.internship"></div>
          </div>
        </div>

        <!-- 实习全息档案 -->
        <div class="cyber-card" style="margin-top: 0.5rem;">
          <h3 class="card-title"><i class="iconfont icon-shenheguanli"></i>实习全息档案</h3>
          <div ref="internshipCardChart" class="chart-box internship-card-container" style="height: 400px;">
            <div class="loading-effect" v-if="isLoading.internshipCard"></div>
          </div>
        </div>

        <!-- 通用技能评估柱状图 -->
        <div class="cyber-card" style="margin-top: 1rem;">
          <h3 class="card-title"><i class="iconfont icon-RectangleCopy" style="font-size: 24px;"></i>通用技能评估</h3>
          <div ref="generalSkillChart" class="chart-box" style="height: 285px;">
            <div class="loading-effect" v-if="isLoading.generalSkill"></div>
          </div>
        </div>

      </div>
    </div>

    <!-- 全屏按钮 -->
    <div class="fullscreen-btn" @click="toggleFullscreen">
      <i class="iconfont icon-fullscreen"></i>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import navigation from '@/views/navigation.vue'
import {
  getAnnouncementList, getUserTag, getScore, getAwardsNumber,
  getUserInternshipInfo, getUserCommonSkillScore, getReportComprehensiveAbility,
  getUserActivity, getUserItemScore
} from '@/api/student/qualityReport/qualityReport'
import { POPPER_INJECTION_KEY } from 'element-plus'

const leftTags = ref([
  { text: '标签 1' },
  { text: '标签 2' },
  { text: '标签 3' }
]);

const rightTags = ref([
  { text: '标签 4' },
  { text: '标签 5' },
  { text: '标签 6' }
]);
// 虚拟公告数据
const noticeData = ref([
  { content: '2023年度综合素质评价已启动，请及时完善信息' },
  { content: '新功能上线：成长轨迹可视化分析系统已开放' },
  { content: '温馨提示：请及时上传本学期获奖证书' }
])

// 成绩变化趋势数据
const gpaData = ref({
  semesters: ['大一上', '大一下', '大二上', '大二下', '大三上', '大三下', '大四上', '大四下'],
  scores: [52, 85, 88, 87, 89, 94, 87, 96]
})
// 平均分数和挂科数
const avgGpa = ref(0);
const failureCount = ref(0);

// 通用技能虚拟数据
const generalSkillData = ref({
  skills: [
    { name: '沟通能力突出', score: 85 },
    { name: '团队', score: 90 },
    { name: '时间', score: 75 },
    { name: '问题', score: 88 },
    { name: '批判', score: 82 }
  ]
})
// 奖项分布数据
const awardData = ref({
  categories: ['国际', '国家', '省级', '校级', '院系'],
  values: [3, 7, 12, 20, 15] // 示例数据
})
// 各项能力综合评分
const radarData = ref({
  dimensions: [
    { name: '竞赛', max: 100 },
    { name: '实习', max: 100 },
    { name: '项目', max: 100 },
    { name: '通用技能', max: 100 },
    { name: '学业', max: 100 }
  ],
  scores: [88, 92, 85, 90, 96] // 示例数据，替换为你的真实数据
})

// 实习得分数据
const internshipData = ref({
  companies: [],
  dimensions: [
    { name: '公司规模', key: 'companySizeScore' },
    { name: '实习周期', key: 'internshipDay' }, // 天数需要标准化处理
    { name: '职位相关', key: 'jobRelevance' }
  ],
  scores: []
})
// 实习全息档案数据
const internshipCardData = ref([])
// 项目得分虚拟数据
const projectScoreData = ref({
  projects: [
    { name: '电商系统', daysScore: 85, typeScore: 75, techScore: 90 },
    { name: 'AI算法', daysScore: 70, typeScore: 80, techScore: 85 },
    { name: '大数据平台', daysScore: 90, typeScore: 85, techScore: 95 },
  ]
})
// 项目经历虚拟数据
const projectWallData = ref([
  { 
    name: '智能推荐系统',
    techs: ['Python', 'TensorFlow', 'Spark', 'Kafka'],
    highlight: '实现毫秒级实时推荐，提升转化率35%'
  },
  {
    name: '区块链存证平台',
    techs: ['Go', 'Hyperledger', 'IPFS', 'Vue3'],
    highlight: '司法级区块链存证，日均处理10万+事务'
  },
  {
    name: '云原生监控系统',
    techs: ['K8s', 'Prometheus', 'Golang', 'React'],
    highlight: '百万级指标实时分析，故障定位效率提升60%百万级指标实时分析，故障定位效率提升60%百万级指标实时分析，故障定位效率提升60%'
  }
])
// 活动经历虚拟数据
const activityTimelineData = ref([
  {
    name: 'AI黑客马拉松',
    organizer: 'Google开发者社区',
    content: '开发基于TensorFlow的智能识别系统',
    duration: 3
  },
  {
    name: '区块链峰会',
    organizer: '以太坊基金会',
    content: '担任核心开发者论坛翻译志愿者',
    duration: 2
  },
  {
    name: '云计算训练营',
    organizer: 'AWS Academy',
    content: '完成云原生架构认证课程',
    duration: 5
  },
  {
    name: '开源贡献计划',
    organizer: 'Apache基金会',
    content: '为Kafka项目提交PR并合并开发基于TensorFlow的智能识别系统',
    duration: 7
  }
])

// 图表实例
const projectScoreChart = ref(null)
const projectWallChart = ref(null)
const activityTimelineChart = ref(null)
const performanceChartRef = ref(null);
const generalSkillChart = ref(null)
const awardChart = ref(null)  
const radarChart = ref(null)
const internshipBarChart = ref(null);
const internshipCardChart = ref(null);

// 是否正在加载
const isLoading = ref({
  gpa: false,
  generalSkill: false,
  award: false,
  radar: false,
  internship: false,
  internshipCard: false,
  projectScore: false,
  projectWall: false,
  activityTimeline: false,
})

onMounted(async () => {
  // 调用接口获取公告数据
  await fetchAnnouncements();
  // 获取用户标签
  await fetchUserTags();
  // 获取学业数据
  await fetchScore();
  // 获取奖项分布数据
  await fetchAwardsNumber();
  // 获取实习经历数据
  await fetchInternshipInfo();
  // 获取通用技能数据
  await fetchCommonSkillData();
  // 获取综合能力数据
  await fetchReportComprehensiveAbility();
  // 获取活动经历数据
  await fetchUserActivity();
  // 获取项目数据
  await fetchUserItemScore();

  initCharts()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  disposeCharts()
})

// 获取公告数据的函数
const fetchAnnouncements = async () => {
  try {
    let params = {
      pageNum: 1,
      pageSize: 5,
    };
    const response = await getAnnouncementList(params);
    // 提取公告内容
    const announcementRows = response.rows;
    noticeData.value = announcementRows.map(row => ({
      content: row.content
    }));
  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取用户标签的函数
const fetchUserTags = async () => {
  try {
    const response = await getUserTag();
    const data = response;
    // 将标签分为左、右两部分
    leftTags.value = [
      { text: data.commonSkillTag || '无数据' },
      { text: data.internshipTag || '无数据' },
      { text: data.itemTag || '无数据' }
    ];
    rightTags.value = [
      { text: data.competitionTag || '无数据' },
      { text: data.scoreTag || '无数据' },
      { text: data.threeQuotients || '无数据' }
    ];

  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取学业数据的函数
const fetchScore = async () => {
  try {
    const response = await getScore();
    const data = response;
    // 更新平均分数和挂科数
    avgGpa.value = data.avgGpa;
    failureCount.value = data.failureCount;

    // 更新成绩数据
    gpaData.value.semesters = [
      '大一上', '大一下', '大二上', '大二下',
      '大三上', '大三下', '大四上', '大四下'
    ];

    // 按顺序映射学期分数
    gpaData.value.scores = [
      data.firstYearOneScore,
      data.firstYearTwoScore,
      data.secondYearOneScore,
      data.secondYearTwoScore,
      data.thirdYearOneScore,
      data.thirdYearTwoScore,
      data.fourthYearOneScore,
      data.fourthYearTwoScore,
      // 根据后端返回的字段补全所有学期数据
      // 如果有缺失的学期，可以补充默认值或占位符
    ];

    // 确保 scores 数组和 semesters 数组的长度一致
    if (gpaData.value.scores.length < gpaData.value.semesters.length) {
      // 补充默认值或占位符
      const missingCount = gpaData.value.semesters.length - gpaData.value.scores.length;
      gpaData.value.scores = gpaData.value.scores.concat(Array(missingCount).fill(0));
    }

  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取奖项分布数据的函数
const fetchAwardsNumber = async () => {
  try {
    const response = await getAwardsNumber();
    const data = response;
    // 更新奖项分布数据
    awardData.value.categories = ['国际', '国家', '省级', '校级', '院系'];
    awardData.value.values = [
      data.internationalGeneralNumber,
      data.nationGeneralNumber,
      data.provinceGeneralNumber,
      data.schoolGeneralNumber,
      data.departmentGeneralNumber,
    ];
  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取实习经历数据的函数
const fetchInternshipInfo = async () => {
  try {
    const response = await getUserInternshipInfo();
    const internships = response;
    // 处理实习维度分析数据
    internships.forEach((internship) => {
      internshipData.value.companies.push(internship.companyName);
      internshipData.value.scores.push([
        parseInt(internship.companySizeScore), // 公司规模得分
        internship.internshipDay, // 实习周期
        internship.jobRelevance // 职位相关性
      ]);
    });

    // 处理实习全息档案数据
    internships.forEach((internship) => {
      internshipCardData.value.push({
        company: internship.companyName,
        position: internship.position,
        result: internship.internshipSuccess || '无评定结果',
        duration: internship.internshipDay,
        photo: internship.internshipPhoto || ''
      });
    });
  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取通用技能数据的函数
const fetchCommonSkillData = async () => {
  try {
    const response = await getUserCommonSkillScore();
    const skills = response.map(skill => {
      return {
        name: skill.skillName,
        score: skill.skillScore || 0 // 如果没有分数，则默认为0
      };
    });
    generalSkillData.value.skills = skills;
  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取综合能力数据的函数
const fetchReportComprehensiveAbility = async () => {
  try {
    const response = await getReportComprehensiveAbility();
    const data = response;

    // 更新雷达图数据
    radarData.value.dimensions = [
      { name: '竞赛', max: 100 },
      { name: '实习', max: 100 },
      { name: '项目', max: 100 },
      { name: '通用技能', max: 100 },
      { name: '学业', max: 100 }
    ];

    radarData.value.scores = [
      data.competitionAvgScore || 0, // 竞赛平均分
      data.practiceAvgScore || 0,   // 实习平均分
      data.itemAvgScore || 0,      // 项目平均分
      data.commonSkillAvgScore || 0, // 通用技能平均分
      data.gradeAvgScore || 0      // 学业平均分
    ];
  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取活动经历数据的函数
const fetchUserActivity = async () => {
  try {
    const response = await getUserActivity();
    const activities = response.map(activity => ({
      name: activity.activityName,
      organizer: activity.organization,
      content: activity.description || '无描述',
      duration: activity.period || 0
    }));
    activityTimelineData.value = activities;
  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

// 获取项目数据的函数
const fetchUserItemScore = async () => {
  try {
    const response = await getUserItemScore();
    const projects = response.map(item => ({
      name: item.itemName,
      daysScore: item.totalDay, // 项目天数得分
      typeScore: item.typeScore, // 项目类型得分
      techScore: item.technologyStackScore, // 技术栈得分
      techs: item.technologyStack.split(','), // 技术栈
      highlight: item.itemLight || '无亮点描述', // 项目亮点
      photo: item.photoMaterials || '无图片' // 项目图片
    }));

    // 更新项目得分数据
    projectScoreData.value.projects = projects;

    // 更新全息项目矩阵数据
    projectWallData.value = projects.map(project => ({
      name: project.name,
      techs: project.techs,
      highlight: project.highlight
    }));
  } catch (error) {
    console.error('接口调用错误：', error);
  }
};

const initCharts = () => {
  isLoading.value.gpa = true
  isLoading.value.generalSkill = true
  isLoading.value.award = true
  isLoading.value.radar = true
  isLoading.value.internship = true
  isLoading.value.internshipCard = true
  isLoading.value.projectScore = true
  isLoading.value.projectWall = true
  isLoading.value.activityTimeline = true

  setTimeout(() => {
    initPerformanceChart();
    initGeneralSkillChart()
    initAwardChart()
    initRadarChart()
    initInternshipBarChart()
    initInternshipCardChart()
    initProjectScoreChart()
    initProjectWallChart()
    initActivityTimelineChart()

    isLoading.value.gpa = false
    isLoading.value.generalSkill = false
    isLoading.value.award = false
    isLoading.value.radar = false
    isLoading.value.internship = false
    isLoading.value.internshipCard = false
    isLoading.value.projectScore = false
    isLoading.value.projectWall = false
    isLoading.value.activityTimeline = false
  }, 1000)
}

// 成绩变化趋势
// 成绩变化趋势
const initPerformanceChart = () => {
  if (!performanceChartRef.value) {
    console.error('DOM 元素未正确获取');
    return;
  }

  const chart = echarts.init(performanceChartRef.value);
  
  // 正确配置结构
  const option = {
    grid: {
      top: '15%',   // 顶部留白从默认10%增加到15%
      bottom: '20%', // 底部留白增加
      left: '12%',  // 左侧留白微调
      right: '8%'   // 右侧留白减少
    },
    animation: true,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: gpaData.value.semesters,
      axisLabel: {
        color: '#00f7ff'
      },
      axisLine: {
        fontSize: 14,  // 字体从12 → 14
        rotate: 45,     // 新增倾斜角度避免重叠
        lineStyle: {
          color: '#00f7ff'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '得分',
      nameTextStyle: {
        fontSize: 14,  // 名称字体放大
        color: '#00f7ff'
      },
      axisLabel: {
        fontSize: 14,  // 数值字体从12 → 14
        color: '#00f7ff'
      },
      axisLine: {
        lineStyle: {
          color: '#00f7ff'
        }
      },
      min: 50,
      max: 100
    },
    series: [{
      type: 'line',
      symbol: 'circle',
      symbolSize: 10,//(val) => val / 3,
      itemStyle: {
        color: '#00f7ff',
        lineStyle: {
          width: 3,
          type: 'solid'
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(0, 247, 255, 0.3)'
        }, {
          offset: 1,
          color: 'rgba(0, 247, 255, 0)'
        }])
      },
      label: {
        fontSize: 14,  // 数据标签字体放大
        show: true,
        position: 'top',
        color: '#00f7ff'
      },
      data: gpaData.value.scores
    }]
  };

  // 必须调用 setOption
  chart.setOption(option);
  performanceChartRef.value = chart;
};

// 通用技能横向渐变柱状图
const initGeneralSkillChart = () => {
  if (!generalSkillChart.value) return;

  const chart = echarts.init(generalSkillChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(8,25,51,0.9)',
      borderColor: '#00f7ff',
      borderWidth: 1,
      formatter: params => `
        <div style="border-bottom:1px solid rgba(0,247,255,0.5);padding-bottom:5px;margin-bottom:5px;">
          ${params[0].name}
        </div>
        <span style="color:#00f7ff">技能值：${params[0].value}</span>
      `
    },
    yAxis: {  // 改为数值轴
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        color: '#00f7ff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,247,255,0.1)'
        }
      }
    },
    xAxis: {  // 改为类目轴
      type: 'category',
      data: generalSkillData.value.skills.map(s => s.name),
      axisLabel: {
        color: '#00f7ff',
        fontSize: 14,
        interval: 0,
        formatter: (value) => {
          return value.length > 6 ? value.substring(0, 6) + '...' : value;
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0,247,255,0.5)'
        }
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    series: [{
      type: 'bar',
      data: generalSkillData.value.skills.map(s => s.score),
      itemStyle: {
        color:'#00f7ff',
        // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // 改为从下到上渐变
        //     { offset: 0, color: '#0061ff' },  // 底部颜色
        //     { offset: 1, color: '#00f7ff' }   // 顶部颜色
        // ]),
        //borderColor: '#fff',
        borderWidth: 1,
        shadowBlur: 10,
        // shadowColor: 'rgba(0, 97, 255, 0.5)',
        borderRadius: [8, 8, 0, 0]  // 调整圆角方向
      },
      barWidth: '50%',
      label: {
        show: true,
        position: 'right',  // 标签显示在右侧
        color: '#00f7ff',
        formatter: ({ value }) => `${value} 分`,
        fontSize: 12
      },
      emphasis: {
        itemStyle: {
          shadowColor: 'rgba(0, 247, 255, 0.8)',
          shadowBlur: 20
        }
      }
    }],
    graphic: [{
      type: 'rect',
      z: -1,
      shape: { width: '100%', height: '100%' },
      style: {
        fill: 'rgba(0,247,255,0.02)',
        stroke: 'rgba(0,247,255,0.1)',
        lineWidth: 1
      }
    }]
  });

  // 调整粒子动画坐标方向
  let particles = [];
  const addParticles = () => {
    particles = generalSkillData.value.skills.map((skill, idx) => ({
      x: idx * 20 + 10,  // 改为横向分布
      y: Math.random() * 100,
      speed: Math.random() * 0.5 + 0.2
    }));
  };

  addParticles();

  generalSkillChart.value = chart;
};


// 奖项分布图
const initAwardChart = () => {
  if (!awardChart.value) return;

  const chart = echarts.init(awardChart.value);
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(8,25,51,0.9)',
      borderColor: '#00f7ff',
      borderWidth: 1,
      formatter: params => `
        <div style="border-bottom:1px solid rgba(0,247,255,0.5);padding-bottom:5px;margin-bottom:5px;">
          ${params.name}
        </div>
        <span style="color:#00f7ff">${params.value}项</span>
      `
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 8,
        borderColor: '#06152a',
        borderWidth: 2,
        color: params => {
          const colors = [
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#00ff87' },
              { offset: 1, color: '#00f7ff' }
            ]),
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#0061ff' },
              { offset: 1, color: '#60efff' }
            ]),
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#ff00ff' },
              { offset: 1, color: '#ff0066' }
            ]),
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#ffeb3b' },
              { offset: 1, color: '#ff9800' }
            ]),
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#8bc34a' },
              { offset: 1, color: '#4caf50' }
            ])
          ];
          return colors[params.dataIndex % colors.length];
        }
      },
      label: {
        show: true,
        color: '#00f7ff',
        formatter: '{b}\n{d}%',
        rich: {
          d: {
            color: '#ff00ff',
            padding: [2, 5],
            borderRadius: 4
          }
        }
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.5)'
        }
      },
      data: awardData.value.categories.map((name, index) => ({
        name,
        value: awardData.value.values[index]
      })),
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: idx => idx * 100
    }],
    graphic: [{
      type: 'circle',
      z: -1,
      shape: { cx: '50%', cy: '50%', r: '75%' },
      style: {
        fill: 'rgba(0,247,255,0.05)',
        stroke: '#00f7ff',
        lineWidth: 2
      }
    }]
  };

  // 添加粒子动画
  option.series.push({
    type: 'scatter',
    coordinateSystem: 'geo',
    zlevel: 2,
    rippleEffect: {
      brushType: 'stroke'
    },
    itemStyle: {
      color: '#00f7ff'
    },
    data: new Array(50).fill(0).map(() => ({
      value: [
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 10
      ]
    }))
  });

  chart.setOption(option);
  awardChart.value = chart;
}


// 各项综合能力评分雷达图
const initRadarChart = () => {
  if (!radarChart.value) return;

  const chart = echarts.init(radarChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(8,25,51,0.9)',
      borderColor: '#00f7ff',
      borderWidth: 1,
      formatter: (params) => {
        // params 是一个数组，包含当前悬浮的所有数据点
        const seriesName = params[0].seriesName; // 系列名称
        const value = params[0].value; // 当前数据点的值
        const name = params[0].name; // 当前指标的名称

        return `
      <div style="border-bottom:1px solid #00f7ff;padding-bottom:5px;margin-bottom:5px;">
        ${name} (${seriesName})
      </div>
      <span style="color:#00f7ff">评分：${value}</span>
    `;
      }
    },
    radar: {
      shape: 'polygon',
      center: ['50%', '55%'],
      radius: '75%',
      axisName: {
        color: '#00f7ff',
        fontSize: 12,
        borderRadius: 3,
        padding: [3, 5]
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.3)',
          type: 'dashed'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.1)',
          type: 'dashed'
        }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(0, 247, 255, 0.05)', 'rgba(0, 247, 255, 0.02)'],
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 10
        }
      },
      indicator: radarData.value.dimensions
    },
    series: [{
      type: 'radar',
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#00f7ff',
        borderColor: '#fff',
        borderWidth: 2
      },
      lineStyle: {
        color: '#00f7ff',
        width: 2,
        type: 'dashed'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(0, 247, 255, 0.3)'
        }, {
          offset: 1,
          color: 'rgba(0, 247, 255, 0.1)'
        }])
      },
      data: [{
        value: radarData.value.scores,
        name: '综合能力',
        label: {
          show: true,
          formatter: (params) => `${params.value}`, // 修改为获取实际值
          color: '#fff',
          backgroundColor: 'rgba(0, 247, 255, 0.3)',
          padding: [2, 5],
          borderRadius: 4
        }
      }],
      animationType: 'scale',
      animationEasing: 'elasticOut'
    }],
    graphic: [{
      type: 'circle',
      shape: { r: 0 },
      keyframeAnimation: {
        duration: 3000,
        loop: true,
        keyframes: [{
          percent: 0,
          shape: { r: 0 },
          style: { opacity: 1 }
        }, {
          percent: 1,
          shape: { r: '80%' },
          style: { opacity: 0 }
        }]
      },
      style: {
        stroke: '#00f7ff',
        fill: 'transparent',
        lineWidth: 2
      }
    }]
  });

  radarChart.value = chart;
}


// 实习得分柱状图配置（实习维度分析）
const initInternshipBarChart = () => {
  if (!internshipBarChart.value) {
    console.error('DOM 元素未正确获取');
    return;
  }

  const chart = echarts.init(internshipBarChart.value)
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      grid: { top: '15%', bottom: '15%' }, // 压缩图表显示区域
      formatter: params => `
        <div style="border-bottom:1px solid rgba(0,247,255,0.5);padding-bottom:5px;margin-bottom:5px;">
          ${params[0].name}
        </div>
        ${params.map(item => `
          <span style="display:inline-block;width:10px;height:10px;background:${item.color};border-radius:50%;margin-right:5px;"></span>
          ${item.seriesName}: ${item.value}
        `).join('')}
      `
    },
    xAxis: {
      type: 'category',
      data: internshipData.value.companies,
      axisLabel: {
        color: '#00f7ff',
        fontSize: 12,
        interval: 0
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0,247,255,0.6)'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: { 
        color: '#00f7ff',
        fontSize: 12, // 缩小坐标轴文字
        interval: 0   // 强制显示所有标签
       },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,247,255,0.1)'
        }
      }
    },
    series: internshipData.value.dimensions.map((dim, index) => ({
      name: dim.name,
      type: 'bar',
      data: internshipData.value.scores.map(company => company[index]),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: ['#00ff87', '#60efff', '#0061ff'][index] },
          { offset: 1, color: ['#00ff8766', '#60efff66', '#0061ff66'][index] }
        ]),
        barWidth: 18, // 缩小柱体宽度
        // borderColor: '#fff',
        // borderWidth: 1,
        // shadowBlur: 10,
        // shadowColor: ['#00ff87', '#60efff', '#0061ff'][index]
        borderRadius: [4, 4, 0, 0]  // 增加圆角
      },
      barCategoryGap: '30%'
    }))
  })
  internshipBarChart.value = chart;
}

// 实习全息卡片
const initInternshipCardChart = () => {
  if (!internshipCardChart.value) return;

  const chart = echarts.init(internshipCardChart.value);
  const cardWidth = 280;    // 宽度从280 → 200
  const cardHeight = 80;    // 高度从120 → 80
  const verticalGap = 25;   // 垂直间距从40 → 25
  const horizontalPadding = 90; // 水平边距从130 → 90

  chart.setOption({
    series: [{
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: (params, api) => {
        const dataIndex = params.dataIndex;
        const itemData = internshipCardData.value[dataIndex];
        const containerWidth = api.getWidth();
        const containerHeight = api.getHeight();

        // 计算布局
        const totalCards = internshipCardData.value.length;
        const startY = (containerHeight - (totalCards * (cardHeight + verticalGap))) / 2;
        const isLeft = dataIndex % 2 === 0; // 交替方向

        // 位置计算
        const x = isLeft
          ? horizontalPadding
          : containerWidth - horizontalPadding - cardWidth;
        const y = startY + dataIndex * (cardHeight + verticalGap);

        return {
          type: 'group',
          x: x,
          y: y,
          children: [
            {
              type: 'rect',
              shape: {
                width: cardWidth,
                height: cardHeight,
                r: 8
              },
              style: {
                fill: 'rgba(8, 25, 51, 0.9)',
                stroke: isLeft ? '#00ff87' : '#0061ff',
                lineWidth: 2,
                shadowBlur: 20,
                // shadowColor: isLeft ? 'rgba(0, 255, 135, 0.3)' : 'rgba(0, 97, 255, 0.3)'
              }
            },
            {
              //公司名称
              type: 'text',
              style: {
                text: itemData.company,
                x: 15,
                y: 12,
                fill: '#fff',
                fontSize: 18,
                fontWeight: 'bold',
                width: cardWidth - 40,
                overflow: 'truncate'
              }
            },
            {
              //职位信息
              type: 'text',
              style: {
                text: itemData.position,
                x: 15,
                y: 35,
                fill: isLeft ? '#00f7ff' : '#60efff',
                fontSize: 14
              }
            },
            {
              //实习结果
              type: 'text',
              style: {
                text: `实习结果：${itemData.result}`,
                x: 15,
                y: 55,
                fill: '#ffeb3b',
                fontSize: 12
              }
            },
            // 添加连接线（仅当不是最后一个时）
            dataIndex < internshipCardData.value.length - 1 && {
              type: 'line',
              shape: {
                x1: isLeft ? cardWidth / 2 : -cardWidth / 2,
                y1: cardHeight,
                x2: isLeft ? cardWidth / 2 : -cardWidth / 2,
                y2: cardHeight + verticalGap / 2
              },
              style: {
                stroke: '#00f7ff',
                lineWidth: 1,
                lineDash: [5, 5]
              }
            }
          ].filter(Boolean)
        };
      },
      data: internshipCardData.value
    }]
  });

  // 动态调整容器高度为内容高度
  chart.on('finished', () => {
    const contentHeight = chart.getHeight();
    const container = document.querySelector('.internship-card-container');
    container.style.height = `${contentHeight}px`;
  });

  // 窗口变化时重新计算布局和高度
  const resizeHandler = () => {
    chart.resize();
    const contentHeight = chart.getHeight();
    const container = document.querySelector('.internship-card-container');
    container.style.height = `${contentHeight}px`;
  };
  window.addEventListener('resize', resizeHandler);

  internshipCardChart.value = chart;
};

// 项目能量得分横向堆叠柱状图
const initProjectScoreChart = () => {
  if (!projectScoreChart.value) return;

  const chart = echarts.init(projectScoreChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0, 247, 255, 0.1)'
        }
      },
      backgroundColor: 'rgba(8, 25, 51, 0.9)',
      // borderColor: '#00f7ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      formatter: (params) => {
        const projectName = params[0].name
        const total = params.reduce((sum, item) => sum + item.value, 0)
        return `
          <div style="
            border-bottom: 1px solid #00f7ff;
            padding-bottom: 8px;
            margin-bottom: 8px;
            font-size: 16px;
            color: #00f7ff;
          ">
            ${projectName} (总分：${total})
          </div>
          ${params.map(item => `
            <div style="
              display: flex;
              align-items: center;
              margin: 4px 0;
              padding: 4px;
              background: ${item.color}33;
              border-radius: 4px;
            ">
              <div style="
                width: 12px;
                height: 12px;
                background: ${item.color};
                margin-right: 8px;
                border-radius: 2px;
              "></div>
              <div style="flex:1">${item.seriesName}</div>
              <div style="color: #00f7ff;">${item.value}</div>
            </div>
          `).join('')}
        `
      }
    },
    grid: { left: '8%', right: '5%', bottom: '8%', containLabel: true },
    xAxis: {
      type: 'value',
      axisLabel: { color: '#00f7ff' },
      splitLine: { lineStyle: { color: 'rgba(0,247,255,0.1)' } },
      max: 300 // 三个维度总分上限
    },
    yAxis: {
      type: 'category',
      data: projectScoreData.value.projects.map(p => p.name),
      axisLabel: {
        color: '#00f7ff',
        fontSize: 10,
        interval: 0,   // 强制显示所有标签
        formatter: (value) => value.length > 6 ? value.substring(0,6)+'...' : value  // 水平文字长文本截断
      }
    },
    legend: {
      top: '5%',
      right: '5%',
      icon: 'roundRect',
      textStyle: {
        color: '#00f7ff',
        fontSize: 10,
        rich: {
          icon: {
            width: 12,
            height: 12,
            borderRadius: 4,
            marginRight: 5
          }
        }
      },
      formatter: (name) => {
        const icons = {
          '技术栈得分': '#0061ff',
          '项目类型得分': '#ff00ff',
          '项目天数得分': '#00ff87'
        }
        return `{icon|◉}{name|${name}}`
      }
    },
    series: [
      {
        name: '技术栈得分',
        type: 'bar',
        stack: 'total',
        barWidth: '50%',
        data: projectScoreData.value.projects.map(p => p.techScore),
        itemStyle: {
          // color: '#00f7ff',
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#0061ff' },
            { offset: 1, color: '#00f7ff' }
          ]),
          // borderColor: '#fff',
          borderWidth: 1,
          shadowBlur: 10,
          // shadowColor: 'rgba(0, 97, 255, 0.5)'
        },
        label: {
          show: true,
          position: 'insideLeft',
          color: '#fff',
          formatter: '{a}',
          fontSize: 8,
          rich: {
            a: {
              backgroundColor: 'rgba(0, 97, 255, 0.8)',
              padding: [2, 5],
              borderRadius: 4
            }
          }
        }
      },
      {
        name: '项目类型得分',
        type: 'bar',
        stack: 'total',
        data: projectScoreData.value.projects.map(p => p.typeScore),
        itemStyle: {
          //  color: '#00d4ff',
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#7b61ff' },
            { offset: 1, color: '#00d4ff' }
          ]),
          // borderColor: '#fff',
          borderWidth: 1,
          shadowBlur: 10,
          // shadowColor: 'rgba(123, 97, 255, 0.5)'
        },
        label: {
          show: true,
          position: 'insideLeft',
          color: '#fff',
          formatter: '{a}',
          fontSize: 8,
          rich: {
            a: {
              backgroundColor: 'rgba(123, 97, 255, 0.8)',
              padding: [2, 5],
              borderRadius: 4
            }
          }
        }
      },
      {
        name: '项目天数得分',
        type: 'bar',
        stack: 'total',
        data: projectScoreData.value.projects.map(p => p.daysScore),
        itemStyle: {
          // color: '#00ff87',
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#00ff87' },
            { offset: 1, color: '#00f7ff' }
          ]),
          // borderColor: '#fff',
          borderWidth: 1,
          shadowBlur: 10,
          // shadowColor: 'rgba(0, 255, 135, 0.5)',
          borderRadius: [0, 4, 4, 0]  // 增加圆角
        },
        label: {
          show: true,
          position: 'insideLeft',
          color: '#fff',
          formatter: '{a}',
          fontSize: 8,
          rich: {
            a: {
              backgroundColor: 'rgba(0, 255, 135, 0.8)',
              padding: [2, 5],
              borderRadius: 4
            }
          }
        }
      }
    ],
    graphic: [{
      type: 'rect',
      z: -1,
      left: 'center',
      top: 'middle',
      shape: { width: '110%', height: '110%' },
      style: {
        fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(0,247,255,0.05)' },
          { offset: 1, color: 'rgba(0,247,255,0.02)' }
        ]),
        stroke: '#00f7ff',
        lineWidth: 2
      }
    }]
  });

  // 添加扫描线动画
  // let current = 0;
  // setInterval(() => {
  //   chart.dispatchAction({
  //     type: 'update',
  //     seriesIndex: 0,
  //     graphic: [{
  //       type: 'line',
  //       z: 100,
  //       shape: { x1: 0, y1: current, x2: chart.getWidth(), y2: current },
  //       style: {
  //         stroke: '#00f7ff',
  //         lineWidth: 2,
  //         shadowBlur: 10,
  //         shadowColor: '#00f7ff'
  //       }
  //     }]
  //   });
  //   current = (current + 20) % chart.getHeight();
  // }, 50);

  projectScoreChart.value = chart;
};

// 全息项目卡牌墙
const initProjectWallChart = () => {
  if (!projectWallChart.value) return;

  const chart = echarts.init(projectWallChart.value);
  const cardWidth = 350;  // 原350 → 250
  const cardHeight = 120; // 原180 → 120 
  const gap = 15;         // 原20 → 15

  chart.setOption({
    backgroundColor: 'transparent',
    xAxis: {
      type: 'value',
      show: false // 不显示坐标轴
    },
    yAxis: {
      type: 'value',
      show: false // 不显示坐标轴
    },
    series: [{
      type: 'custom',
      renderItem: (params, api) => {
        const index = params.dataIndex;
        const data = projectWallData.value[index];
        const containerWidth = api.getWidth();
        const colNum = Math.floor(containerWidth / (cardWidth + gap));
        const x = (index % colNum) * (cardWidth + gap);
        const y = Math.floor(index / colNum) * (cardHeight + gap);

        return {
          type: 'group',
          x: x,
          y: y,
          children: [
            // 背景卡片
            {
              type: 'rect',
              shape: { width: cardWidth, height: cardHeight, r: 8 },
              style: {
                fill: 'rgba(8, 25, 51, 0.9)',
                stroke: '#00f7ff',
                lineWidth: 2,
                shadowBlur: 20,
                shadowColor: 'rgba(0, 247, 255, 0.3)'
              },
              emphasis: {
                style: {
                  shadowBlur: 30,
                  shadowColor: 'rgba(0, 247, 255, 0.6)'
                }
              }
            },
            // 项目名称
            {
              type: 'text',
              style: {
                text: data.name,
                x: 20,
                y: 20,
                fill: '#00ff87',
                fontSize: 10,
                fontWeight: 'bold'
              }
            },
            // 技术栈标签云
            {
              type: 'group',
              y: 50,
              children: data.techs.map((tech, i) => ({
                type: 'rect',
                shape: { width: 100, height: 24, r: 4 },
                x: 20 + (i % 3) * 110, // 每行显示 3 个标签
                y: Math.floor(i / 3) * 30, // 每行高度
                style: {
                  fill: 'rgba(0, 247, 255, 0.1)',
                  stroke: '#00f7ff'
                }
              }))
            },
            // 技术栈文字
            {
              type: 'group',
              y: 50,
              children: data.techs.map((tech, i) => ({
                type: 'text',
                style: {
                  text: tech,
                  x: 25 + (i % 3) * 110,
                  y: 8 + Math.floor(i / 3) * 30,
                  fill: '#00f7ff',
                  fontSize: 8,
                  width: 100, // 设置固定宽度
                  whiteSpace: 'normal', // 允许换行
                  overflow: 'break', // 超出部分换行
                  ellipsis: true // 超出部分显示省略号
                }
              }))
            },
            // 亮点文字
            {
              type: 'text',
              style: {
                text: data.highlight,
                x: 10,
                y: 100,
                fill: '#ff00ff',
                fontSize: 8,
                width: cardWidth - 40, // 设置宽度限制
                lineHeight: 20,
                rich: {
                  mark: {
                    color: '#00ff87',
                    padding: [0, 5]
                  }
                },
                // 自动换行配置
                whiteSpace: 'normal', // 允许换行
                overflow: 'break', // 超出部分换行
                ellipsis: true // 超出部分显示省略号
              }
            },
            // 动态粒子
            {
              type: 'circle',
              shape: { cx: cardWidth - 20, cy: 20, r: 4 },
              style: {
                fill: '#00f7ff',
                shadowBlur: 10,
                shadowColor: '#00f7ff'
              },
              animation: 'pulse 2s infinite'
            }
          ]
        };
      },
      data: projectWallData.value
    }]
  });

  // 添加悬浮动画
  chart.on('mouseover', { seriesIndex: 0 }, (e) => {
    chart.setOption({
      graphic: {
        id: 'hoverEffect',
        type: 'rect',
        shape: { width: cardWidth, height: cardHeight, r: 8 },
        style: {
          fill: 'rgba(0, 247, 255, 0.1)',
          stroke: '#00f7ff',
          lineWidth: 2
        },
        position: [e.offsetX - cardWidth / 2, e.offsetY - cardHeight / 2]
      }
    });
  });

  projectWallChart.value = chart;
}

// 活动经历水平时间流线图
const initActivityTimelineChart = () => {
  if (!activityTimelineChart.value) return;

  const chart = echarts.init(activityTimelineChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(8,25,51,0.9)',
      borderColor: '#00f7ff',
      borderWidth: 1,
      position: (point, params, dom, rect, size) => {
        // 计算提示框的位置，避免超出图表边界
        // 动态计算位置，防止超出屏幕边界
        // 逻辑要点：当右侧/底部空间不足时，自动左移/上移提示框
        const viewWidth = size.viewWidth;
        const viewHeight = size.viewHeight;
        const boxWidth = dom.offsetWidth;
        const boxHeight = dom.offsetHeight;

        let x = point[0];
        let y = point[1];

        // 如果提示框在右边超出边界，则显示在左边
        if (x + boxWidth > viewWidth) {
          x = point[0] - boxWidth;
        }

        // 如果提示框在左边超出边界，则显示在右边
        if (x < 0) {
          x = point[0];
        }

        // 如果提示框在底部超出边界，则显示在顶部
        if (y + boxHeight > viewHeight) {
          y = point[1] - boxHeight;
        }

        return [x, y];
      },
      // 自定义HTML内容模板
      formatter: (params) => `
        <div style="border-bottom:1px solid #00f7ff;padding-bottom:5px;margin-bottom:5px;">
          活动名：${params.data.name}
        </div>
        <div style="color:#00f7ff;margin:3px 0;">
          <i class="iconfont icon-organization"></i>组织方：${params.data.organizer}
        </div>
        <div style="color:#7dabf8;margin:3px 0;">
          <i class="iconfont icon-duration"></i>持续时间：${params.data.duration}天
        </div>
        <div style="color:#fff;margin-top:5px;">
          活动内容：${params.data.content}
        </div>
      `
    },
    xAxis: {
      type: 'value',
      name: '持续\n时间',
      min: 0,
      max: 50,
      axisLabel: {
        color: '#00f7ff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,247,255,0.1)'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: activityTimelineData.value.map(item => item.name),
      axisLabel: {
        color: '#00f7ff',
        fontSize: 14,
        formatter: (value) => value.replace(/(.{8}).+/, '$1...') // 名称过长省略
      }
    },
    series: [{
      type: 'bar',
      data: activityTimelineData.value.map(item => ({
        value: item.duration,
        name: item.name,
        organizer: item.organizer,
        content: item.content,
        duration: item.duration // 确保 duration 属性被传递
      })),
      itemStyle: {
        // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: '#0061ff' },
        //   { offset: 1, color: '#00f7ff' }
        // ]),
        color:'#00f7ff',
        // borderColor: '#fff',
        borderWidth: 1,
        shadowBlur: 10,
        shadowColor: 'rgba(0, 247, 255, 0.5)',
        borderRadius: [0, 6, 6, 0]
      },
      barWidth: '70%',
      label: {
        show: true,
        position: 'right',
        color: '#00f7ff',
        formatter: ({ value }) => `${value}天`,
        fontSize: 12
      }
    }],
    graphic: [{
      type: 'line',
      z: 100,
      shape: { x1: 0, y1: 0, x2: '100%', y2: 0 },
      style: {
        stroke: 'rgba(0,247,255,0.3)',
        lineWidth: 1,
        lineDash: [5, 5]
      },
      animation: {
        duration: 3000,
        loop: true,
        delay: Math.random() * 1000
      }
    }]
  }

  // 添加动态粒子效果
  option.series.push({
    type: 'effectScatter',
    coordinateSystem: 'cartesian2d',
    data: activityTimelineData.value.map(item => ({
      value: [item.duration, item.name],
      symbolSize: 8,
      itemStyle: {
        color: '#ff00f',//'#ff00ff',
        //shadowBlur: 10,
        //shadowColor: '#ff00ff'
      }
    })),
    rippleEffect: {
      brushType: 'stroke'
    }
  })

  chart.setOption(option)
  activityTimelineChart.value = chart
}
// 修改 handleResize
const handleResize = () => {
  [performanceChartRef, awardChart, radarChart, internshipBarChart,
    internshipCardChart, generalSkillChart, projectScoreChart, projectWallChart, activityTimelineChart].forEach(c => {
      if (c.value && typeof c.value.resize === 'function') {
        c.value.resize();
      }
    });
};

// 修改 disposeCharts
const disposeCharts = () => {
  [performanceChartRef, awardChart, radarChart, internshipBarChart,
    internshipCardChart, generalSkillChart, projectScoreChart, projectWallChart, activityTimelineChart].forEach(c => {
      if (c.value && typeof c.value.dispose === 'function') {
        c.value.dispose();
      }
    });
};

// 全屏切换
const isFullscreen = ref(false)
const toggleFullscreen = () => {
  const element = document.documentElement
  if (!isFullscreen.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
  isFullscreen.value = !isFullscreen.value
}
</script>

<style lang="scss" scoped>
//整体容器样式
.dashboard-container {
  width: 100%;
  max-width: 100%;
  background: radial-gradient(circle at center, #06152a 0%, #020a18 100%);
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  position: relative;

  //跑马灯效果
  .marquee-container {
    height: 40px;
    background: rgba(0, 247, 255, 0.1);
    border: 1px solid rgba(0, 247, 255, 0.3);
    margin: 10px 20px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.2), transparent);
      animation: scanning 3s infinite;
    }

    .marquee-content {
      display: inline-block;
      white-space: nowrap;
      animation: marquee 25s linear infinite;

      .marquee-item {
        padding: 0 50px;
        font-size: 16px;
        color: #fff;//#00f7ff
        line-height: 40px;

        i {
          margin-right: 10px;
          font-size: 18px;
        }
      }
    }
  }

  .main-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 20px;
    padding: 20px;
    height: auto; // 修改为 auto
  }


  .dual-chart-container {
    display: grid;
    grid-template-columns: 1fr 1fr; // 等分两列
    gap: 10px; // 列间距
    margin-top: 0.5rem;

    .cyber-card {
      margin: 0 !important; // 移除原有margin
      height: 298px; // 统一高度

      .chart-box {
        height: 200px !important; // 固定图表高度
      }
    }
  }
  .cyber-card {
    background: rgba(8, 25, 51, 0.8);//项目矩阵等每个部分的背景颜色
    border: 1px solid rgba(0, 247, 255, 0.2);//盒子的边框颜色
    border-radius: 8px;
    padding: 10px;
    position: relative;
    //box-shadow: 0 0 30px rgba(0, 247, 255, 0.1);//盒子边框的发光效果

    &::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, rgba(0, 247, 255, 0.4), transparent 50%, rgba(0, 247, 255, 0.4));
      z-index: -1;
      border-radius: 10px;
      animation: borderGlow 3s infinite;
    }
    //每个板块的标题样式
    .card-title {
      // margin-bottom: 8px; // 缩小标题间距
      // font-size: 16px;
      margin-bottom: 15px;
      color: #00f7ff;
      margin-bottom: 8px !important;
      font-size: 14px !important;

      i {
        margin-right: 10px;
      }
    }

    .loading-effect {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      border-radius: 50%;
      border: 3px dashed #00f7ff;
      animation: rotate 2s linear infinite;
    }
  }

  .cyber-card1 {
    width: 600px;
    height: auto;
    background: rgba(8, 25, 51, 0.8);//项目矩阵等每个部分的背景颜色
    border: 1px solid rgba(0, 247, 255, 0.2);//盒子的边框颜色
    border-radius: 8px;
    padding: 20px;
    position: relative;
    //box-shadow: 0 0 30px rgba(0, 247, 255, 0.1);//盒子边框的发光效果

    &::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, rgba(0, 247, 255, 0.4), transparent 50%, rgba(0, 247, 255, 0.4));
      z-index: -1;
      border-radius: 10px;
      animation: borderGlow 3s infinite;
    }

    .card-title {
      font-size: 20px;
      margin-bottom: 15px;
      color: #00f7ff;

      i {
        margin-right: 10px;
      }
    }

    .loading-effect {
      width: 1100px;
      height: 1200px;
      margin: 100px auto;
      border-radius: 50%;
      border: 3px dashed #00f7ff;
      animation: rotate 2s linear infinite;
    }
  }

  .profile-card {
    position: relative;
    text-align: center;
    padding: 20px 0;

    .hologram-effect {
      width: 240px;
      height: 240px;
      border-radius: 50%;
      margin: 0 auto;
      background: radial-gradient(circle, rgba(0, 247, 255, 0.3) 0%, transparent 70%);
      position: relative;

      .profile-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #00f7ff;
        box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
      }

      .scan-line {
        position: absolute;
        top: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #00f7ff, transparent);
        animation: scan 3s infinite;
      }
    }

    .tags-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;

      .left-tags,
      .right-tags {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 70%;
      }

      .left-tags {
        position: absolute;
        left: 70px;
      }

      .right-tags {
        position: absolute;
        right: 70px;
      }

      .tag {
        padding: 5px 10px;
        background: rgba(0, 247, 255, 0.2);
        border: 1px solid rgba(0, 247, 255, 0.3);
        border-radius: 4px;
        font-size: 12px;
        color: #00f7ff;
        text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
        z-index: 1;
      }
    }
  }

  .data-glowing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;

    .glowing-item {
      padding: 15px;
      background: rgba(0, 247, 255, 0.1);
      border: 1px solid rgba(0, 247, 255, 0.3);
      border-radius: 8px;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.2), transparent);
        animation: shine 2s infinite;
      }

      .label {
        display: block;
        color: #7dabf8;
        font-size: 14px;
        margin-bottom: 5px;
      }

      .value {
        font-size: 24px;
        font-weight: bold;
        color: #00f7ff;
      }
    }
  }

  .chart-box {
    height: 400px;

    // 针对全息卡片特殊调整
    &[ref="internshipCardChart"] {
      height: 500px; // 适当增加高度
      position: relative;

      canvas {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .fullscreen-btn {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 247, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: rgba(0, 247, 255, 0.4);
    }

    i {
      font-size: 24px;
      color: #00f7ff;
    }
  }
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes scan {
  0% {
    top: -2px;
  }

  100% {
    top: 100%;
  }
}

@keyframes borderGlow {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes shine {
  to {
    left: 100%;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1600px) {
  .cyber-card1 {
    width: 550px;
    height: 450px;
  }
}

.internship-card-container {
  // 不设置固定高度，靠内容撑开
  height: auto !important;
  overflow: visible !important; // 确保内容不会被裁剪

  // ECharts 容器
  >div:first-child {
    transform-origin: center center;
  }

  // 添加外层发光效果
  &::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(0, 247, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
  }
}
</style>